<template>
	<view class="record_count">
		<view class="record_l">
			<image class="record_img" 
			:src="record.no==='qd'&& record.clock_sta==='1'? ori: 
			record.no==='qd'&& record.clock_sta==='2'? ori_on :
			record.no==='xx'&& record.clock_sta==='1'? clo :
			record.no==='xx'&& record.clock_sta==='2'? clo_on :
			record.no==='zd'&& record.clock_sta==='1'? des :
			record.no==='zd'&& record.clock_sta==='2'? des_on : ''"></image>
		</view>
		<view class="record_r">
			<view class="record_r_o">
				<view class="record_r_o_tit">{{record.clock_address}}</view>
				<view class="comp_content_sta" :class="record.clock_sta==='1'?'sign_no':'sign_on'">{{record.clock_sta==='1'?'未完成':'已完成'}}</view>
			</view>
			<view class="record_r_t">
				打卡时间：{{record.time}}
			</view>
			<view class="record_r_th">
				<view>打卡照片：</view>
				<view>
					<image-upload
					        :max="1" name="file"
					        :chooseNum="9"
					        v-model="record.img_url"
					        @chooseSuccess="ChooseSuccess">
					</image-upload>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import imageUpload from '@/components/image-upload/image-upload.vue'
	export default {
		name: "record_count",
		components:{
		    imageUpload
		},
		props: {
			record: {
				type: Object,
				default () {
					return []
				}
			}
		},
		data() {
			return {
				ori:'/static/clockIn/origin.png',
				ori_on:'/static/clockIn/origin_on.png',
				des:'/static/clockIn/des.png',
				des_on:'/static/clockIn/des_on.png',
				clo:'/static/clockIn/clock.png',
				clo_on:'/static/clockIn/clock_on.png'
			}
		},
		methods: {
			//跳转详细页
			todetail() {
				this.$emit('onclick')
			},
			ChooseSuccess(tempFilePaths) { //选择图片返回
			    this.imgUpload(tempFilePaths);
			    /*******************************/
			},
			imgUpload(tempFilePaths) {
			    let _self = this;
			    uni.showLoading({
			        title: '上传中'
			    });
			    let uploadImgs = [];
			    tempFilePaths.forEach((item, index) => {
			        uploadImgs.push(new Promise((resolve, reject) => {
			            let str = 'blob:http://localhost:8080/';
			            let imgName= '';
			            if(item.indexOf(str)>-1){
			                imgName = item.split("blob:http://localhost:8080/")[1]
			            }else {
			                imgName = item
			            }
			            uni.uploadFile({
			                url: "http://upload-z2.qiniup.com/",
			                formData: {
			                    key: imgName + '.jpg',
			                    fname:imgName + '.jpg',
			                    openid: _self.openid
			                },
			                filePath: item,
			                name: 'file',
			                success: (uploadFileRes) => {
			                    resolve(uploadFileRes);
			                    var _res = JSON.parse(uploadFileRes.data);
			                    _self.formdata.img_url.push(_self.domain + _res.key);
			                },
			                fail: (err) => {
			                    console.log(err);
			                    reject(err);
			                },
			                complete: () => {
			                    //uni.hideLoading();
			                }
			            });
			        }))
			    })
			    Promise.all(uploadImgs) //执行所有需请求的接口
			        .then((results) => {
			            uni.hideLoading();
			        })
			        .catch((res, object) => {
			            uni.hideLoading();
			        });
			}
		}
	}
</script>

<style lang="scss" scoped>
	.sign_no {
		background-color: #eee;
		color: #333;
	}

	.sign_on {
		background-color: #02BB6F;
		color: #fff;
	}

	.fc_green {
		font-size: 26rpx;
		color: #02BB6F;
	}

	.magin_l {
		margin-left: 25rpx;
	}

	.color-red {
		color: red !important;
	}

	.font-small {
		font-size: 24rpx !important;
	}

	.record_count {
		display: flex;
		width: 100%;
		margin-bottom: 30rpx;
		.record_l {
			display: flex;
			width: 71rpx;
			margin-right: 9rpx;

			.record_img {
				width: 71rpx;
				height: 82rpx;
			}
		}
		.record_r{
			display: flex;
			flex-direction: column;
			width: calc(100% - 80rpx);
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
			.record_r_o{
				display: flex;
				margin-bottom: 20rpx;
				.record_r_o_tit{
					margin-right: 18rpx;
				}
				.comp_content_sta{
					border-radius: 15rpx;
					height:30rpx;
					line-height: 30rpx;
					font-size: 18rpx;
					padding: 0 10rpx;
				}
			}
			.record_r_t{
				margin-bottom: 20rpx;
			}
			.record_r_th{
				display: flex;
				margin-bottom: 20rpx;
			}
		}
	}
</style>
